<template>
	<view style="height:100vh">
		<layout :a_icon="true" index="/pages/mes/index" layoutTitle="制造执行MES">
			<!-- 主内容区 -->
			<view class="mes-container">
				<!-- 欢迎区域 -->
				<view class="welcome-section">
					<view class="welcome-content">
						<text class="welcome-title">智慧生产管理平台</text>
						<text class="welcome-subtitle">打造低碳环保智能制造生态系统</text>
					</view>
					<view class="welcome-image"></view>
				</view>
				
				<!-- 功能区域 -->
				<view class="features-grid">
					<view 
						v-for="(item, index) in al" 
						:key="index" 
						class="feature-card"
						:style="getCardStyle(index)"
						@click="tiaozhuan(item)"
					>
						<view class="feature-icon" :class="getIconClass(item.icon)">
							<text class="iconfont" :class="item.icon"></text>
						</view>
						<view class="feature-info">
							<text class="feature-name">{{ item.text }}</text>
							<view class="feature-progress">
								<view class="progress-bar" :style="getProgressStyle(index)"></view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 生产状态区域 -->
				<view class="stats-section">
					<view class="section-title">
						<text>生产管理</text>
					</view>
					<view class="stats-cards">
						<view class="stat-card">
							<view class="stat-icon production-icon"></view>
							<view class="stat-info">
								<text class="stat-value">98.2%</text>
								<text class="stat-label">生产效率</text>
							</view>
						</view>
						<view class="stat-card">
							<view class="stat-icon quality-icon"></view>
							<view class="stat-info">
								<text class="stat-value">99.5%</text>
								<text class="stat-label">品质合格率</text>
							</view>
						</view>
						<view class="stat-card">
							<view class="stat-icon energy-icon"></view>
							<view class="stat-info">
								<text class="stat-value">-12.4%</text>
								<text class="stat-label">能耗降低率</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 碳足迹展示 -->
				<view class="carbon-footer">
					<view class="carbon-title">
						<text>今日碳足迹</text>
					</view>
					<view class="carbon-value">
						<text>减少碳排放: 2.45吨</text>
					</view>
					<view class="carbon-slogan">
						<text>绿色智造，共建碳中和未来</text>
					</view>
				</view>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getSmallMenu
	} from "@/api/menu/index"
	import {
		getUserProfile
	} from "../../api/system/user"
	const al = ref([]);
	
	// 颜色方案 - 碳中和主题
	const colors = {
		primary: '#27ae60',
		secondary: '#2ecc71',
		tertiary: '#26de81',
		darkBlue: '#3498db',
		lightBlue: '#2980b9',
		accent: '#16a085',
		background: {
			light: '#f6fbf8',
			medium: '#e8f5f0',
		}
	};
	
	// 获取菜单数据
	const GetSmallMenu = () => {
		let g;
		getUserProfile().then(userProfile => {
			if (userProfile.roleGroup === '超级管理员') {
				g = 1;
			} else if (userProfile.roleGroup === '业务员') {
				g = 2;
			} else {
				return 0; // 默认值，如果角色不匹配
			}
			getSmallMenu(4, g).then(ref => {
				console.log(g)
				const transformedOptions = ref.map(item => ({
					text: item.name,
					url: item.url, // 将 id 转换为字符串
					icon: item.icon, // 假设 renderIcon 是一个函数，用于生成图标
				}));
				console.log(transformedOptions)
				al.value = transformedOptions;
			});
		})
	}
	
	// 页面跳转
	const tiaozhuan = (item) => {
		const url = item.url; // 从 item 中获取 URL
		if (url) {
			uni.navigateTo({
				url: url // 使用 item.url
			});
		} else {
			console.log("URL is empty");
		}
	};
	
	// 获取卡片样式
	const getCardStyle = (index) => {
		const hues = [154, 160, 168, 175, 145, 140];
		const hue = hues[index % hues.length];
		return {
			'--card-hue': hue,
			'animation-delay': `${0.1 + (index * 0.1)}s`
		};
	};
	
	// 获取进度条样式
	const getProgressStyle = (index) => {
		const values = [78, 65, 92, 45, 84, 70];
		const value = values[index % values.length];
		return {
			width: `${value}%`
		};
	};
	
	// 获取图标类名
	const getIconClass = (iconName) => {
		const iconMap = {
			'icon-project': 'project-icon',
			'icon-device': 'device-icon',
			'icon-production': 'production-icon',
			'icon-product': 'product-icon',
			'icon-workflow': 'workflow-icon',
			'icon-dashboard': 'dashboard-icon',
			// 添加更多映射
		};
		return iconMap[iconName] || 'default-icon';
	};
	
	GetSmallMenu();
</script>

<style scoped>
/* 全局容器 */
.mes-container {
	min-height: 100vh;
	padding: 24rpx;
	background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

/* 欢迎区域 */
.welcome-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(145deg, #ffffff, #f9fafb);
	border-radius: 24rpx;
	padding: 36rpx;
	box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.12);
	animation: fadeIn 0.5s ease forwards;
	position: relative;
	overflow: hidden;
}

.welcome-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	z-index: 1;
}

.welcome-title {
	font-size: 46rpx;
	font-weight: 700;
	color: #2c3e50;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.welcome-subtitle {
	font-size: 30rpx;
	color: #27ae60;
	font-weight: 500;
}

.welcome-image {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(39, 174, 96, 0.08) 40%), 
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%2327ae60" opacity="0.1"/></svg>');
	background-size: cover;
	background-position: center;
}

/* 功能卡片 */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
	gap: 24rpx;
}

.feature-card {
	background: linear-gradient(145deg, 
		hsl(var(--card-hue, 154), 70%, 96%),
		hsl(var(--card-hue, 154), 65%, 94%)
	);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.1);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	animation: slideUp 0.5s ease forwards;
	opacity: 0;
	border: 1px solid hsla(var(--card-hue, 154), 70%, 50%, 0.1);
}

.feature-card:hover {
	transform: translateY(-6rpx);
	box-shadow: 0 12rpx 24rpx rgba(39, 174, 96, 0.18);
	background: linear-gradient(145deg, 
		hsl(var(--card-hue, 154), 75%, 97%),
		hsl(var(--card-hue, 154), 70%, 95%)
	);
}

.feature-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: hsla(var(--card-hue, 154), 70%, 50%, 0.1);
	margin-bottom: 16rpx;
}

.feature-icon .iconfont {
	font-size: 42rpx;
	color: hsla(var(--card-hue, 154), 70%, 40%, 0.9);
}

.feature-info {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.feature-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #2c3e50;
}

.feature-progress {
	height: 8rpx;
	background-color: hsla(var(--card-hue, 154), 70%, 95%, 0.5);
	border-radius: 4rpx;
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	background-color: hsla(var(--card-hue, 154), 70%, 50%, 0.7);
	border-radius: 4rpx;
}

/* 图标样式定义 */
.project-icon {
	background-color: rgba(39, 174, 96, 0.1);
}

.device-icon {
	background-color: rgba(52, 152, 219, 0.1);
}

.production-icon {
	background-color: rgba(155, 89, 182, 0.1);
}

.product-icon {
	background-color: rgba(230, 126, 34, 0.1);
}

.workflow-icon {
	background-color: rgba(241, 196, 15, 0.1);
}

.dashboard-icon {
	background-color: rgba(231, 76, 60, 0.1);
}

.default-icon {
	background-color: rgba(149, 165, 166, 0.1);
}

/* 生产状态区域 */
.stats-section {
	background: linear-gradient(145deg, #ffffff, #f9fafb);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.1);
	animation: fadeIn 0.6s ease forwards;
	animation-delay: 0.3s;
	opacity: 0;
}

.section-title {
	margin-bottom: 24rpx;
}

.section-title text {
	font-size: 34rpx;
	font-weight: 600;
	color: #2c3e50;
	position: relative;
	padding-left: 20rpx;
}

.section-title text::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 28rpx;
	width: 6rpx;
	background-color: #27ae60;
	border-radius: 3rpx;
}

.stats-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250rpx, 1fr));
	gap: 20rpx;
}

.stat-card {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(249, 250, 251, 0.9));
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	border: 1px solid rgba(39, 174, 96, 0.08);
	transition: all 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 8rpx 16rpx rgba(39, 174, 96, 0.08);
}

.stat-icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.stat-info {
	display: flex;
	flex-direction: column;
}

.stat-value {
	font-size: 36rpx;
	font-weight: 700;
	color: #27ae60;
}

.stat-label {
	font-size: 24rpx;
	color: #7f8c8d;
}

/* 碳足迹展示 */
.carbon-footer {
	background: linear-gradient(145deg, #27ae60, #2ecc71);
	border-radius: 20rpx;
	padding: 30rpx;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	text-align: center;
	box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.2);
	animation: fadeIn 0.7s ease forwards;
	animation-delay: 0.4s;
	opacity: 0;
}

.carbon-title {
	font-size: 30rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.carbon-value {
	font-size: 38rpx;
	font-weight: 700;
	margin-bottom: 8rpx;
}

.carbon-slogan {
	font-size: 26rpx;
	opacity: 0.9;
}

/* 动画效果 */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(20rpx); }
	to { opacity: 1; transform: translateY(0); }
}

/* 响应式设计 */
@media (max-width: 768px) {
	.features-grid {
		grid-template-columns: 1fr;
	}
	
	.stats-cards {
		grid-template-columns: 1fr;
	}
	
	.welcome-title {
		font-size: 40rpx;
	}
	
	.welcome-subtitle {
		font-size: 28rpx;
	}
}
</style>